<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@taglib uri="/struts-tags" prefix="s" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="<%=request.getContextPath() %>/css/popup.css" rel="stylesheet" media="screen"  />

<script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery.js" ></script>
<!-- library of css -->
<%--  <link type="text/css"
	href="<%=request.getContextPath()%>/css/bootstrap.css" rel="stylesheet">
<link href="<%=request.getContextPath()%>/css/bootstrap-responsive.css"
	rel="stylesheet">
<link href="<%=request.getContextPath()%>/css/jquery.fancybox.css"
	rel="stylesheet">
<link href="<%=request.getContextPath()%>/css/uniform.default.css"
	rel="stylesheet">
<link href="<%=request.getContextPath()%>/css/bootstrap.datepicker.css"
	rel="stylesheet">
<link href="<%=request.getContextPath()%>/css/jquery.cleditor.css"
	rel="stylesheet">
<link href="<%=request.getContextPath()%>/css/jquery.plupload.queue.css"
	rel="stylesheet">
<link href="<%=request.getContextPath()%>/css/jquery.tagsinput.css"
	rel="stylesheet">
<link href="<%=request.getContextPath()%>/css/jquery.ui.plupload.css"
	rel="stylesheet">
<link href="<%=request.getContextPath()%>/css/chosen.css"
	rel="stylesheet">
<link href="<%=request.getContextPath()%>/css/style.css"
	rel="stylesheet"> --%>
<!-- finish -->


<!-- jquery catch action -->
<script  type="text/javascript" language="javascript">
$(document).ready(function(){
	$(".QTPopup").css('display','none')
	$(".lnchPopop").click(function(){
		$(".QTPopup").animate({width: 'show'}, 'slow');})
		$(".closeBtn").click(function(){			
			$(".QTPopup").css('display', 'none');
		})
		
})
</script>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>

</head>
<body>
<div class="QTPopup">
	<div class="popupGrayBg"></div>
	<div class="QTPopupCntnr">
		<div class="gpBdrLeftTop"></div>
		<div class="gpBdrRightTop"></div>
		<div class="gpBdrTop"></div>
		<div class="gpBdrLeft">
			<div class="gpBdrRight">
				<div class="caption">
					Search Popup
				</div>
				<a href="#" class="closeBtn" title="Close"></a>
				
				<div class="content">
				
				<!-- create popup -->
			<div class="row-fluid">
			<div class="span12">
				<div class="box">
					<!-- <div class="box-head tabs">
						<h3>Search Postcode</h3>
							<a id="close-button" title="Close" href="#"></a>
					</div> -->
					
					<div class="box-content">
						<form action="#" class="validate form-horizontal" >
							<!-- create field -->
							<div id="input-type">
							<fieldset>
								<div class="row-fluid force-margin" >
									<div id="test">
										<div class="span3">
											<div class="control-group">
												<!-- <label class="control-label" for="postcode">Postcode: </label> -->
												Postcode: <input type="text" class="input-square" name="postcode" />
											</div>
											<!-- <div class="controls">
										<input type="text" id="postcode" class="input-square" name="postcode"/>
									</div> -->
										</div>
										<div class="span3">
											<div class="control-group">
												<!-- <label class="control-label" for="postcode">Postcode: </label> -->
												Street: <input type="text" class="input-square"
													name="street" />
											</div>
											<!-- <div class="controls">
										<input type="text" id="postcode" class="input-square" name="postcode"/>
									</div> -->
										</div>
										<div class="span3">
											<div class="control-group">
												<!-- <label class="control-label" for="postcode">Postcode: </label> -->
												Town: <input type="text" class="input-square" name="town" />
											</div>
											<!-- <div class="controls">
										<input type="text" id="postcode" class="input-square" name="postcode"/>
									</div> -->
										</div>
									</div>
								</div>
							</fieldset>
							</div>
						</form>
						<!-- finish -->

						<!-- create button -->
						<div class="btn-toolbar">
							<!-- <button class="btn btn-round">Search Address</button> -->
								<input id="buttonSearch" type="button" class="btn btn-round" name="searchAdd" value="SearchAddress" />
								<input id="buttonNone" type="button" class="btn btn-round" name="none" value="None" />
								<input id="buttonClear" type="button" class="btn btn-round" name="clear" value="Clear" />
						</div>
						<!-- finish  -->

					<div class="box-nomargin">
						<table class='table table-striped dataTable table-bordered dataTable-noheader'>
							<thead>
								<tr>
									<th>&nbsp;</th>
									<th>Address</th>
									<th>Post code</th>
									<th>Town</th>
									<th>County</th>
									<th>Country</th>
								</tr>
							</thead>
							<tbody>
								<s:iterator value="listAddress" var="address">
									<tr>
										<td><input type="radio"
											class="uniform" name="address" ></td>
										<td><s:property value="address.addressName"/></td>
										<td><s:property value="address.postcode"/></td>
										<td><s:property value="address.town.townName"/></td>
										<td><s:property value="address.county.countyName"/></td>
										<td><s:property value="address.country.countryName"/></td>
									</tr>
									
								</s:iterator> 
								
							</tbody>
						</table>
						<!-- <div class="dataTables_paginate paging_bootstrap pagination">
							<ul>
								<li class="prev disabled"><a href="#">Previous</a></li>
								<li class="active"><a href="#">1</a></li>
								<li><a href="#">2</a></li>
								<li><a href="#">3</a></li>
								<li><a href="#">4</a></li>
								<li><a href="#">5</a></li>
								<li class="next"><a href="#">Next</a></li>
							</ul>
						</div> -->
					</div>
						<div class="btn-toolbar">
							<input  id="buttonSelect" type="button" class="btn btn-round" name="select" value="Select" /> 
							<input  id="buttonClose" type="button" class="btn btn-round" name="close" value="Close" /> 
						</div>
					</div>
				</div>
				
			</div>
		</div>
	</div>
</div> 
		</div>
		<!-- <div class="gpBdrLeftBottom"></div>
		<div class="gpBdrRightBottom"></div>
		<div class="gpBdrBottom"></div> -->
</div>
</div>
<%-- <div style="text-align:center; line-height:150px;"><a href="#" class="lnchPopop" style="border:1px solid #dadada; background:#fff; line-height:105px; padding:10px 25px; color:gray; text-decoration:none; ">Lauch Popup</a></div>
<div class="QTPopup">
	<div class="popupGrayBg"></div>
	<div class="QTPopupCntnr">
		<div class="gpBdrLeftTop"></div>
		<div class="gpBdrRightTop"></div>
		<div class="gpBdrTop"></div>
		<div class="gpBdrLeft">
			<div class="gpBdrRight">
				<div class="caption">
					Search Popup
				</div>
				<a href="#" class="closeBtn" title="Close"></a>
				
				<div class="content">
				
				<!-- create popup -->
			<div class="row-fluid">
			<div class="span12">
				<div class="box">
					<!-- <div class="box-head tabs">
						<h3>Search Postcode</h3>
							<a id="close-button" title="Close" href="#"></a>
					</div> -->
					
					<div class="box-content">
						<form action="#" class="validate form-horizontal" >
							<!-- create field -->
							<div id="input-type">
							<fieldset>
								<div class="row-fluid force-margin" >
									<div id="test">
										<div class="span3">
											<div class="control-group">
												<!-- <label class="control-label" for="postcode">Postcode: </label> -->
												Postcode: <input type="text" class="input-square" name="postcode" />
											</div>
											<!-- <div class="controls">
										<input type="text" id="postcode" class="input-square" name="postcode"/>
									</div> -->
										</div>
										<div class="span3">
											<div class="control-group">
												<!-- <label class="control-label" for="postcode">Postcode: </label> -->
												Street: <input type="text" class="input-square"
													name="street" />
											</div>
											<!-- <div class="controls">
										<input type="text" id="postcode" class="input-square" name="postcode"/>
									</div> -->
										</div>
										<div class="span3">
											<div class="control-group">
												<!-- <label class="control-label" for="postcode">Postcode: </label> -->
												Town: <input type="text" class="input-square" name="town" />
											</div>
											<!-- <div class="controls">
										<input type="text" id="postcode" class="input-square" name="postcode"/>
									</div> -->
										</div>
									</div>
								</div>
							</fieldset>
							</div>
						</form>
						<!-- finish -->

						<!-- create button -->
						<div class="btn-toolbar">
							<!-- <button class="btn btn-round">Search Address</button> -->
								<input type="button" class="btn btn-round" name="searchAdd" value="SearchAddress" />
								<input type="button" class="btn btn-round" name="none" value="None" />
								<input type="button" class="btn btn-round" name="clear" value="Clear" />
						</div>
						<!-- finish  -->

					<div class="box-nomargin">
						<table class='table table-striped dataTable table-bordered dataTable-noheader'>
							<thead>
								<tr>
									<th>&nbsp;</th>
									<th>Address</th>
									<th>Post code</th>
									<th>Town</th>
									<th>County</th>
									<th>Country</th>
								</tr>
							</thead>
							<tbody>
								<s:iterator value="listAddress" var="address">
									<tr>
										<td><input type="radio"
											class="uniform" name="radio" ></td>
										<td><s:property value="addressName"/> </td>
										<td><s:property value="postcode"/></td>
										<td><s:property value=""/></td>
										<td>adgs</td>
										<td>dsg</td>
								</tr>
								</s:iterator>
								<tr>
									<td><input type="radio"
											class="uniform" name="radio" ></td>
									<td>dgg</td>
									<td>dgg</td>
									<td>dgg</td>
									<td>dgg</td>
									<td>dgg</td>
								</tr>
								<tr>
									<td><input type="radio"
											class="uniform" name="radio" ></td>
									<td>dgg</td>
									<td>dgg</td>
									<td>dgg</td>
									<td>dgg</td>
									<td>dgg</td>
								</tr>
								<tr>
									<td><input type="radio"
											class="uniform" name="radio" ></td>
									<td>dgg</td>
									<td>dgg</td>
									<td>dgg</td>
									<td>dgg</td>
									<td>dgg</td>
								</tr>
								<tr>
									<td><input type="radio"
											class="uniform" name="radio" ></td>
									<td>dgg</td>
									<td>dgg</td>
									<td>dgg</td>
									<td>dgg</td>
									<td>dgg</td>
								</tr>
								<tr>
									<td><input type="radio"
											class="uniform" name="radio" ></td>
									<td>dgg</td>
									<td>dgg</td>
									<td>dgg</td>
									<td>dgg</td>
									<td>dgg</td>
								</tr>
								
							</tbody>
						</table>
						<!-- <div class="dataTables_paginate paging_bootstrap pagination">
							<ul>
								<li class="prev disabled"><a href="#">Previous</a></li>
								<li class="active"><a href="#">1</a></li>
								<li><a href="#">2</a></li>
								<li><a href="#">3</a></li>
								<li><a href="#">4</a></li>
								<li><a href="#">5</a></li>
								<li class="next"><a href="#">Next</a></li>
							</ul>
						</div> -->
					</div>
						<div class="btn-toolbar">
							<input type="button" class="btn btn-round" name="select" value="Select" /> 
							<input type="button" class="btn btn-round" name="close" value="Close" /> 
						</div>
					</div>
					<!-- create buton select close -->
					<!-- div class="box-content">
						
					</div> -->
					<!-- finish -->
				</div>
				
			</div>
		</div>
				</div>
			</div> 
		</div>
		<div class="gpBdrLeftBottom"></div>
		<div class="gpBdrRightBottom"></div>
		<div class="gpBdrBottom"></div>
</div>
</div> --%>
</body>
</html>